<template>
    <el-select v-model="selected"
               ref="select"
               :placeholder="placeholder"
               :disabled="disabled"
               :size="size"
               :style="customStyle"
               :filterable="filterable"
               :clearable="clearable"
               :multiple="multiple"
               :allow-create="allowCreate"
               :multiple-limit="multipleLimit"
               :collapse-tags="collapseTags"
               @change="handleSelected">
        <el-option v-for="item in options"
                   :label="item[selectedLabel]"
                   :value="item[selectedValue]"
                   :key="item[selectedValue]" />
    </el-select>
</template>

<script>
    export default {
        name: "index",
        props: {
            // 绑定的值
            value: {
                required: true
            },
            // 选项
            options: {
              type: Array,
              default: () => []
            },
            // 选中时的label
            selectedLabel: {
              type: String,
              default: 'dictLabel'
            },
            // 选中时的value
            selectedValue: {
                type: String,
                default: 'dictValue'
            },
            // 默认选中的标识符
            selectedDefault: {
                type: String,
                default: 'isDefault'
            },
            // 是否可以清除所选内容
            clearable: {
                type: Boolean,
                default: true
            },
            // placeholder
            placeholder: {
                type: String,
                default: '请选择'
            },
            // 禁用
            disabled: {
                type: Boolean,
                default: false
            },
            // 搜索
            filterable: {
                type: Boolean,
                default: true
            },
            // 大小 [medium/small/mini]
            size: {
                type: String,
                default: ''
            },
            // 是否开启多选
            multiple: {
                type: Boolean,
                default: false
            },
            // 开启多选时的限制选择数量
            multipleLimit: {
                type: Number,
                default: 0
            },
            // 多选时是否将选中值按文字的形式展示
            collapseTags: {
                type: Boolean,
                default: true
            },
            // 是否允许创建新的option
            allowCreate: {
                type: Boolean,
                default: false
            },
            // 自定义样式
            customStyle: {
                type: Object,
                default: () => ({})
            }
        },
        data() {
            return {
                selected: this.value
            }
        },
        watch: {
            'value': {
                handler(newVal) {
                    this.selected = newVal
                }
            },
            'selected': {
                handler(newVal, oldVal) {
                    if (newVal !== oldVal) {
                        this.$emit('input', newVal)
                    }
                }
            },
            'options': {
                handler(newVal) {
                    const dict = newVal.find(v => v[this.selectedDefault] === 'Y')
                    if (dict) this.selected = dict?.[this.selectedValue] || ''
                },
                deep: true,
                immediate: true
            }
        },
        methods: {
            /** select选中事件 */
            handleSelected(val) {
                this.$emit('change', val)
            }
        }
    }
</script>

<style scoped>

</style>
